// Main
.settings-action-panel {
	padding-bottom: 16px;
}

// Title
.settings-action-panel__title {
	margin-bottom: 16px;
	font-size: 21px;
	font-weight: 300;
	line-height: 24px;
	color: $gray-dark;
	clear: none;
}

// Body
.settings-action-panel__body {
	font-size: 14px;
	line-height: 20px;
	color: darken( $gray, 10% );
	overflow: hidden;

	p {
		margin-bottom: 20px;
	}
}

a.settings-action-panel__body-text-link {
	color: $blue-medium;
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

// Figure
.settings-action-panel__figure {
	width: 100%;
	margin: 24px 0;
	text-align: center;

	@include breakpoint( ">480px" ) {
		float: right;
		max-width: 208px;
		margin: 0 0 20px 24px;

		&.is-inline-body-text {
			margin: 40px 0 20px 24px;
		}
	}
}

// Footer
.settings-action-panel__footer {
	position: relative;
	padding-top: 17px;

	&::before {
		content: '';
		position: absolute;
			top: 0;
			left: -16px;
			right: -16px;
		height: 1px;
		background-color: $gray-light;

		@include breakpoint( ">480px" ) {
			left: -24px;
			right: -24px;
		}
	}
}

.settings-action-panel__export-button .gridicon,
.settings-action-panel__support-button .gridicon {
	margin-left: 8px;
}

.settings-action-panel__support-button {
	&.is-external {
		margin-right: 8px;
	}
}
